<template>
    <div class="flex h-[80vh] items-center justify-center">
        <v-charts class="h-[50vh]" :option="rosePieOption" :autoresize="true" />
    </div>
</template>

<script setup lang="ts">
import VCharts from "vue-echarts";

const rosePieOption = {
    title: {
        text: "电影标签分类占比",
        // left: "center"
    },
    legend: {
        top: "bottom"
    },
    toolbox: {
        show: true,
        feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    series: [
        {
            name: "Nightingale Chart",
            type: "pie",
            radius: [50, 250],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
                borderRadius: 8
            },
            data: [
                { value: 40, name: "悬疑" },
                { value: 38, name: "动作" },
                { value: 32, name: "喜剧" },
                { value: 30, name: "爱情" },
                { value: 28, name: "科幻" },
                { value: 26, name: "恐怖" },
                { value: 22, name: "剧情" },
                { value: 18, name: "犯罪" }
            ]
        }
    ]
};
</script>

<style scoped lang="scss"></style>
